<template>
  <div class="blog-container">
    <div class="header-actions">
      <h2>博客列表</h2>
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索博客标题..."
          @input="handleSearch"
        >
      </div>
      <button @click="$router.push('/blog/edit')" class="create-btn">
        写博客
      </button>
    </div>

    <div class="hot-tags">
      <span class="tag-label">热门标签：</span>
      <span 
        v-for="tag in hotTags" 
        :key="tag"
        class="tag"
        :class="{ active: selectedTag === tag }"
        @click="filterByTag(tag)"
      >
        {{ tag }}
      </span>
      <span 
        v-if="selectedTag" 
        class="clear-tag"
        @click="clearTagFilter"
      >
        清除筛选
      </span>
    </div>

    <div class="blog-list">
      <div v-for="blog in filteredBlogs" :key="blog.id" class="blog-item">
        <div class="blog-content" @click.stop="viewBlog(blog.id)">
          <h3>{{ blog.title }}</h3>
          <p class="excerpt">{{ blog.content.substring(0, 100) }}...</p>
          <div class="blog-meta">
            <span class="author">作者: {{ getAuthorName(blog) }}</span>
            <span class="time">{{ formatDate(blog.createTime) }}</span>
            <span class="status" :class="getStatusClass(blog)">{{ getBlogStatus(blog) }}</span>
          </div>
        </div>
        
        <div class="action-buttons">
          <div class="blog-actions" v-if="canManageBlog(blog)">
            <button @click.stop="editBlog(blog.id)" class="edit-btn">编辑</button>
            <button @click.stop="confirmDelete(blog)" class="delete-btn">删除</button>
          </div>
          
          <div class="blog-actions" v-if="currentUser.isAdmin && !blog.approved && blog.updateTime">
            <button @click.stop="approveBlog(blog)" class="approve-btn">通过</button>
            <button @click.stop="rejectBlog(blog)" class="reject-btn">拒绝</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogListComponent',
  data() {
    return {
      blogs: [],
      searchQuery: '',
      selectedTag: '',
      hotTags: ['技术', '生活', '学习', '工作', '心得', '教程', '随笔', '前端', '后端', '设计'],
      currentUser: JSON.parse(localStorage.getItem('currentUser') || '{}')
    }
  },
  computed: {
    filteredBlogs() {
      let result = this.blogs;
      
      // 标签筛选
      if (this.selectedTag) {
        result = result.filter(blog => 
          blog.tags && blog.tags.includes(this.selectedTag)
        );
      }
      
      // 搜索筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(blog => 
          blog.title.toLowerCase().includes(query) ||
          blog.content.toLowerCase().includes(query)
        );
      }
      
      return result;
    }
  },
  methods: {
    loadBlogs() {
      this.blogs = JSON.parse(localStorage.getItem('blogs') || '[]');
    },
    handleSearch() {
      // 搜索防抖可以在这里实现
    },
    viewBlog(id) {
      this.$router.push({
        name: 'BlogView',
        params: { id: id.toString() }
      });
    },
    editBlog(id) {
      this.$router.push({
        name: 'BlogEdit',
        params: { id: id.toString() }
      });
    },
    canManageBlog(blog) {
      return this.currentUser.isAdmin || blog.author === this.currentUser.username;
    },
    getStatusClass(blog) {
      if (blog.rejected) return 'status-rejected';
      if (!blog.approved) {
        return blog.updateTime ? 'status-pending' : 'status-draft';
      }
      return 'status-published';
    },
    getBlogStatus(blog) {
      if (blog.rejected) {
        return '已拒绝';
      } else if (!blog.approved) {
        return blog.updateTime ? '待审核' : '草稿';
      }
      return '已发布';
    },
    confirmDelete(blog) {
      if (confirm('确定要删除这篇博客吗？')) {
        this.deleteBlog(blog);
      }
    },
    deleteBlog(blog) {
      const blogs = JSON.parse(localStorage.getItem('blogs') || '[]');
      const index = blogs.findIndex(b => b.id === blog.id);
      if (index !== -1) {
        blogs.splice(index, 1);
        localStorage.setItem('blogs', JSON.stringify(blogs));
        this.loadBlogs(); // 重新加载列表
      }
    },
    formatDate(dateString) {
      return new Date(dateString).toLocaleString();
    },
    approveBlog(blog) {
      if (confirm('确定要通过这篇博客吗？')) {
        const blogs = JSON.parse(localStorage.getItem('blogs') || '[]');
        const index = blogs.findIndex(b => b.id === blog.id);
        if (index !== -1) {
          blogs[index].approved = true;
          blogs[index].approvedTime = new Date().toISOString();
          blogs[index].approvedBy = this.currentUser.username;
          localStorage.setItem('blogs', JSON.stringify(blogs));
          this.loadBlogs();
        }
      }
    },
    rejectBlog(blog) {
      const reason = prompt('请输入拒绝原因：');
      if (reason !== null) {
        const blogs = JSON.parse(localStorage.getItem('blogs') || '[]');
        const index = blogs.findIndex(b => b.id === blog.id);
        if (index !== -1) {
          blogs[index].approved = false;
          blogs[index].rejected = true;
          blogs[index].rejectReason = reason;
          blogs[index].rejectTime = new Date().toISOString();
          blogs[index].rejectedBy = this.currentUser.username;
          localStorage.setItem('blogs', JSON.stringify(blogs));
          this.loadBlogs();
        }
      }
    },
    getAuthorName(blog) {
      // 从用户列表中查找作者信息
      const users = JSON.parse(localStorage.getItem('users') || '[]');
      const author = users.find(user => user.username === blog.author);
      // 如果找到作者且作者有昵称，返回昵称，否则返回用户名
      return author?.nickname || blog.author;
    },
    filterByTag(tag) {
      this.selectedTag = this.selectedTag === tag ? '' : tag;
      this.searchQuery = ''; // 清除搜索条件
    },
    clearTagFilter() {
      this.selectedTag = '';
    }
  },
  created() {
    this.loadBlogs();
  }
}
</script>

<style lang="scss" scoped>
.blog-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;

  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      font-size: 24px;
      color: #333;
    }

    .create-btn {
      padding: 8px 16px;
      background: #ee7419;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #d65f0a;
      }
    }
  }

  .blog-list {
    .blog-item {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      
      .blog-content {
        flex: 1;
        padding-right: 20px;
        cursor: pointer;
        
        &:hover {
          opacity: 0.8;
        }

        h3 {
          font-size: 18px;
          color: #333;
          margin-bottom: 10px;
        }

        .excerpt {
          color: #666;
          margin-bottom: 10px;
          line-height: 1.5;
        }

        .blog-meta {
          color: #999;
          font-size: 14px;
          display: flex;
          align-items: center;
          gap: 15px;

          .status {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            
            &.status-published {
              background: #e6f7ff;
              color: #1890ff;
            }
            
            &.status-pending {
              background: #fff7e6;
              color: #fa8c16;
            }
            
            &.status-draft {
              background: #f5f5f5;
              color: #666;
            }
            
            &.status-rejected {
              background: #fff1f0;
              color: #f5222d;
            }
          }
        }
      }

      .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 180px;
        
        .blog-actions {
          display: flex;
          gap: 8px;
          
          button {
            flex: 1;
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s;
            
            &.edit-btn {
              background: #4CAF50;
              color: white;
              &:hover { background: #45a049; }
            }
            
            &.delete-btn {
              background: #f44336;
              color: white;
              &:hover { background: #da190b; }
            }
            
            &.approve-btn {
              background: #2196F3;
              color: white;
              &:hover { background: #1976D2; }
            }
            
            &.reject-btn {
              background: #FF9800;
              color: white;
              &:hover { background: #F57C00; }
            }
          }
        }
      }
    }
  }

  .blog-filters {
    margin-bottom: 20px;
    
    .filter-item {
      display: inline-block;
      padding: 6px 16px;
      margin-right: 10px;
      border-radius: 4px;
      cursor: pointer;
      background: #f5f5f5;
      color: #666;
      
      &:hover {
        background: #e8e8e8;
      }
      
      &.active {
        background: #ee7419;
        color: white;
      }
    }
  }

  .publish {
    background: #52c41a !important;
    &:hover { background: #73d13d !important; }
  }

  .unpublish {
    background: #faad14 !important;
    &:hover { background: #ffc53d !important; }
  }

  .approve {
    background: #52c41a !important;
    &:hover { background: #73d13d !important; }
  }

  .reject {
    background: #ff4d4f !important;
    &:hover { background: #ff7875 !important; }
  }

  .search-box {
    input {
      width: 300px;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      
      &:focus {
        outline: none;
        border-color: #ee7419;
      }
    }
  }

  .blog-actions {
    display: flex;
    gap: 10px;
    
    button {
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      
      &.edit-btn {
        background: #4CAF50;
        color: white;
        
        &:hover {
          background: #45a049;
        }
      }
      
      &.delete-btn {
        background: #f44336;
        color: white;
        
        &:hover {
          background: #da190b;
        }
      }
    }
  }

  .blog-content {
    cursor: pointer;
    flex: 1;
    padding-right: 20px;
    
    &:hover {
      opacity: 0.8;
    }

    h3 {
      font-size: 18px;
      color: #333;
      margin-bottom: 10px;
    }
  }

  .hot-tags {
    margin: 20px 0;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    .tag-label {
      color: #666;
      margin-right: 10px;
    }

    .tag {
      display: inline-block;
      padding: 4px 12px;
      margin: 0 8px 8px 0;
      background: #f5f5f5;
      border-radius: 16px;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #ee7419;
        color: white;
      }

      &.active {
        background: #ee7419;
        color: white;
      }
    }

    .clear-tag {
      display: inline-block;
      padding: 4px 12px;
      color: #ff4d4f;
      cursor: pointer;
      
      &:hover {
        color: #ff7875;
      }
    }
  }
}

.filter-info {
  margin-bottom: 20px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;

  .clear-filter {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #ee7419;
    color: white;
    cursor: pointer;
    
    &:hover {
      background: #d65f0a;
    }
  }
}
</style> 